/**
 * Checkable Buttons
 */

@use '../../../../css/functions/properties';
@use '../../../../css/mixins/components';

.checkable-button-group {
    &.-default {
        @include components.background('checkable-button-group');
        @include components.border-style('checkable-button-group');
        @include components.border-width('checkable-button-group');
        @include components.border-color('checkable-button-group');
        @include components.border-radius('checkable-button-group');
        @include components.box-shadow('checkable-button-group');
        @include components.color('checkable-button-group');
        @include components.padding('checkable-button-group');
        @include components.transition('checkable-button-group');

        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;

        > .button {
            @include components.background(
                'checkable-button-group',
                'button',
                properties.background-h('button') properties.background-s('button')
                    properties.background-l('button') properties.background-a('button')
            );
            @include components.border-width(
                'checkable-button-group',
                'button',
                properties.border-top-width('button') properties.border-right-width('button')
                    properties.border-bottom-width('button') properties.border-left-width('button')
            );
            @include components.border-style(
                'checkable-button-group',
                'button',
                properties.border-top-style('button') properties.border-right-style('button')
                    properties.border-bottom-style('button') properties.border-left-style('button')
            );
            @include components.border-color(
                'checkable-button-group',
                'button',
                properties.border-top-color('button') properties.border-right-color('button')
                    properties.border-bottom-color('button') properties.border-left-color('button')
            );
            @include components.color('checkable-button-group', 'button', true);

            margin-right: properties.generic('checkable-button-group', 'gap');
            box-shadow: none;

            &:last-child {
                margin-right: 0;
            }

            &.-active {
                @include components.background(
                    'checkable-button-group',
                    'button' 'active',
                    properties.background-h('button') properties.background-s('button')
                        properties.background-l('button') properties.background-a('button')
                );
            }

            &:not(.-disabled):not(.-active) {
                &:hover,
                &.-hover {
                    @include components.background(
                        'checkable-button-group',
                        'button' 'hover',
                        properties.background-h('button', 'hover', true)
                            properties.background-s('button', 'hover', true)
                            properties.background-l('button', 'hover', true)
                            properties.background-a('button', 'hover', true)
                    );
                    @include components.border-color(
                        'checkable-button-group',
                        'button' 'hover',
                        properties.border-top-color('button', 'hover', true)
                            properties.border-right-color('button', 'hover', true)
                            properties.border-bottom-color('button', 'hover', true)
                            properties.border-left-color('button', 'hover', true)
                    );
                }

                &:focus,
                &.-focus {
                    @include components.background(
                        'checkable-button-group',
                        'button' 'focus',
                        properties.background-h('button', 'focus', true)
                            properties.background-s('button', 'focus', true)
                            properties.background-l('button', 'focus', true)
                            properties.background-a('button', 'focus', true)
                    );
                    @include components.border-color(
                        'checkable-button-group',
                        'button' 'focus',
                        properties.border-top-color('button', 'focus', true)
                            properties.border-right-color('button', 'focus', true)
                            properties.border-bottom-color('button', 'focus', true)
                            properties.border-left-color('button', 'focus', true)
                    );
                }
            }
        }
    }
}
